import React, { Component } from 'react';
import "../../view/Index/Mine.scss"
import store from '../../store/index.js'

class Mine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pic: ""
        }
    }
    componentDidMount() {
        var pic = JSON.parse(localStorage.getItem("userInfo")).avatarUrl;
        this.setState({
            pic: pic
        })
        store.subscribe(() => {
            this.setState({})
        })


    }
    handleClick() {
        console.log(this.props.history.push("/favor"))
    }
    render() {
        return (
            <div className='mine'>
                <div className='background'>
                    <div>
                        <img src={this.state.pic} />
                        <span className='name'>章章</span>
                    </div>
                </div>
                <div className='calc'>
                    <div className='favor' onClick={
                        () => {
                            this.handleClick()
                        }
                    }>
                        <div className='sum'>{store.getState().user_favor_list.length}</div>
                        <p>收藏</p>
                    </div>
                    <div className='score'>
                        <div className='sum'>2</div>
                        <p>积分</p>
                    </div>
                    <div className='coupon'>
                        <div className='sum'>2</div>
                        <p>优惠券</p>
                    </div>
                </div>
                <div className="order">
                    <div className="text">
                        <div>我的订单</div>
                        <div>
                            查看所有订单
                            <span className='iconfont'>&#xe743;</span>
                        </div>
                    </div>
                    <div className="content2">
                        <div >
                            <span className='iconfont'>&#xe602;</span>
                            <p>待付款</p>
                        </div>
                        <div >
                            <span className='iconfont'>&#xe61c;</span>
                            <p>待发货</p>
                        </div>
                        <div >
                            <span className='iconfont'>&#xe613;</span>
                            <p>已发货</p>
                        </div>
                        <div >
                            <span className='iconfont'>&#xe603;</span>
                            <p>待评价</p>
                        </div>
                    </div>
                </div>
                <div className="member">
                    <div><p>会员中心</p></div>
                    <div><span className='arrow iconfont'>&#xe743;</span></div>
                </div>
                <div className="bottom">
                    <div className="box">
                        <div><p>领券中心</p></div>
                        <div><span className='arrow iconfont'>&#xe743;</span></div>

                    </div>
                    <div className="box">
                        <div><p>我的评价</p></div>
                        <div><span className='arrow iconfont'>&#xe743;</span></div>

                    </div>
                    <div className="box">
                        <div><p>收货地址</p></div>
                        <div><span className='arrow iconfont'>&#xe743;</span></div>

                    </div>
                    <div className="box">
                        <div><p>我的客服</p></div>
                        <div><span className='arrow iconfont'>&#xe743;</span></div>

                    </div>
                    <div className="box">
                        <div><p>了解更多</p></div>
                        <div><span className='arrow iconfont'>&#xe743;</span></div>

                    </div>

                </div>

            </div>
        );
    }
}

export default Mine;